<template>
	<view>
		<view class="LAB-mod">
				<view class="LAB-title">{{ LABpopup.title }}</view>
				<view class="iconfont iconguanbi" @tap="onPopupClose"></view>
				<view class="LAB-mod-wrap">
					<view class="LAB-content">
						<view class="LAB-count">
							<view class="LAB-count-item" v-if="LABpopup.title === '投入LAB'">
								<view class="itemsSum">
									<view class="color1">
										<text class="color-82">{{ LABpopup.balanceType }}：</text>
										{{ wallet.seed }}
									</view>
								</view>
								<view class="itemRule">
									投入LAB，放大五倍，每天释放千分之二个LAB
								</view>
								<view v-if="labValue" class="itemsCount">
									预计每日释放：{{labValue}} * 5 * 2/1000 =
									<text class="color1">&nbsp;&nbsp; {{ releaseLAB }}</text>
									个LAB
								</view>
							</view>
							<!-- <view class="LAB-count-item" v-if="LABpopup.title === '兑换LABred'">
								<view class="itemsSum">
									<view class="color1">
										<text class="color-82">{{ LABpopup.balanceType }}：</text>
										{{ LABpopup.balance }}
									</view>
								</view>
								<view class="itemRule">将seed兑换为LABred，兑换比例 1：1</view>
								<view v-if="labValue" class="itemsCount">
									兑换成：
									<text class="color1">{{ labValue }}</text>
									个LABred
								</view>
							</view> -->
							<view class="LAB-count-item" v-if="LABpopup.title === '兑换LABtk'">
								<view class="itemsSum">
									<view class="color1">
										<text class="color-82">{{ LABpopup.balanceType }}：</text>
										{{ wallet.shifang }}
									</view>
									<!-- <view class="recharge" @click="tabType('putintoRed')">投入LABred</view> -->
								</view>
								<view class="itemRule">已释放LAB兑换为LABtk，兑换比例 1 : 10</view>
								<view v-if="labValue" class="itemsCount">
									兑换为：
									<text class="color1">{{ labValue * 10 }}</text>
									个LABtk
								</view>
							</view>
						</view>
						<view class="LAB-group">
							<van-cell-group>
								<van-field
									type="number"
									maxlength="10"
									:value="labValue"
									:placeholder="LABpopup.title + '数量'"
									:border="false"
									clearable
									@change="onLABChange"
								/>
							</van-cell-group>
						</view>
						<view>
							<van-button
								size="large"
								custom-class="LAB-submit-btn"
								@click="onDialog(LABpopup.title)"
								type="danger"
							>
								{{ LABpopup.btnText }}
							</van-button>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	props: {
		popupType: {
			type: String,
			default: 'red'
		},
		popupBuy: {
			type: String,
			default: '兑换LABred'
		}
	},
	data() {
		return {
			labValue: '',
			LABpopup: {}
		};
	},
	onShow() {},
	watch: {
		popupType: function(val) {
			this.tabType(val);
		}
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			wallet: 'getWalletInfo'
		}),
		releaseLAB () {
			return parseFloat(this.labValue * 0.01).toFixed(2)
		}
	},
	methods: {
		...mapActions(['setWalletInfo']),
		onDialog() {
			// 调起密码
			if (this.labValue < 1 ) {
				uni.showToast({
					title: '请输入' + this.LABpopup.title + '数量',
					icon: 'none'
				});
				return;
			}
			
			if (this.labValue > this.LABpopup.balance) {
				uni.showToast({
					title: this.LABpopup.balanceType + '不足',
					icon: 'none'
				});
				return;
			}
			this.$emit('emitDialogShow', this.LABpopup.title)
			uni.hideKeyboard();
		},
		getPopupBuy() {
			// 支付
			switch (this.LABpopup.title) {
				case '兑换LABtk':
					this.exchangeLABtk();
					break;
				case '投入LAB':
					this.buyWealth();
					break;
				default:
			}
		},
		/* exchangeLABred() {
			this.$http
				.exchangeLABred({
					addr: this.userInfo.addr,
					value: this.labValue
				})
				.then(e => {
					if (e.data.msg.toLowerCase() === 'ok') {
						this.LABpopup.balance -= this.labValue
						this.$emit('emutGetWallet', {
							title: '兑换成功',
							popupShow: false
						})
						this.labValue = '';
						return;
					}
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					});
				});
		}, */
		exchangeLABtk() {
			this.$http
				.exchangeLABtk({
					addr: this.userInfo.addr,
					uid: this.userInfo.id,
					value: this.labValue,
					type: 2
				})
				.then(e => {
					if (e.data.msg.toLowerCase() === 'ok') {
						this.LABpopup.balance -= this.labValue

						this.$emit('emutGetWallet', {
							title: '兑换成功',
							popupShow: false
						})
						this.labValue = '';
						return;
					}
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					});
				});
		},
		buyWealth() {
			this.$http
				.buyWealth({
					wid: 1,
					uid: this.userInfo.id,
					addr: this.userInfo.addr,
					value: this.labValue
				})
				.then(e => {
					if (e.data.msg.toLowerCase() === 'ok') {
						this.LABpopup.balance -= this.labValue
						this.$emit('emutGetWallet', {
							title: '投入成功LAB',
							popupShow: true
						})
						this.labValue = '';
						return;
					}
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					});
				});
		},
		tabType(type) {
			if (type === 'LAB') {
				this.LABpopup = {
					name: 'LAB',
					title: '投入LAB',
					balanceType: 'LAB余额',
					balance: this.wallet.seed,
					btnText: '确定投入'
				};
				return;
			}
			this.LABpopup = {
				name: 'LABtk',
				title: '兑换LABtk',
				balanceType: '已释放LAB',
				balance: this.wallet.shifang,
				btnText: '确定兑换'
			};
		},
		onLABChange(e) {
			this.labValue = e.detail ? parseInt(e.detail) : 0;
		},
		onPopupClose () {
			this.$emit('emitPopupShow', false)
		},
		resetLabValue() {
			// 重置输入
			this.labValue = '';
		}
	}
};
</script>

<style scoped lang="scss">
.LAB-mod {
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #fff;
	.iconguanbi {
		position: absolute;
		top: 30upx;
		right: 40upx;
		z-index: 2;
		width: 60upx;
		height: 60upx;
		font-size: 44upx;
		color: #9b9b9b;
	}
	.LAB {
		&-title {
			padding: 30upx 0;
			font-size: 34upx;
			// color: #9b9b9b;
		}
		&-count {
			margin: 10upx 0;
			text-align: left;
			font-size: 26upx;
			&-item {
				padding: 0 10upx;
				.itemsSum {
					display: flex;
				}
				.itemRule {
					margin-top: 20upx;
					margin-bottom: 20upx;
					font-size: 20upx;
					line-height: 1.4;
					color: #7e7e7e;
				}
				.itemsCount {
					margin-bottom: 10upx;
					font-size: 22upx;
					.color1 {
						font-size: 28upx;
						font-size: 500;
					}
				}
				.recharge {
					margin-left: 20upx;
					color: #6eb92b;
					font-size: 600;
					text-decoration: underline;
				}
			}
		}
		&-group {
			margin-bottom: 40upx;
		}
	}
	&-wrap {
		padding: 10upx 50upx 80upx 50upx;
	}
}
</style>
